<template>
  <div class="home-container">
    <h1>欢迎{{ authStore.isAuthenticated ? `, ${authStore.userInfo.username}` : '' }}!</h1>

    <div class="function-buttons">
      <el-card
        shadow="hover"
        class="function-card"
        @click="router.push('/books')"
      >
        <div class="card-content">
          <el-icon :size="40"><Collection /></el-icon>
          <h3>图书展示</h3>
        </div>
      </el-card>

      <el-card
        v-if="authStore.isAuthenticated"
        shadow="hover"
        class="function-card"
        @click="router.push('/cart')"
      >
        <div class="card-content">
          <el-icon :size="40"><ShoppingCart /></el-icon>
          <h3>购物车</h3>
        </div>
      </el-card>

      <el-card
        v-if="authStore.isAuthenticated"
        shadow="hover"
        class="function-card"
        @click="router.push('/orders')"
      >
        <div class="card-content">
          <el-icon :size="40"><Document /></el-icon>
          <h3>订单管理</h3>
        </div>
      </el-card>

      <el-card
        v-if="authStore.isAuthenticated"
        shadow="hover"
        class="function-card"
        @click="handleExport"
      >
        <div class="card-content">
          <el-icon :size="40"><Download /></el-icon>
          <h3>订单导出</h3>
        </div>
      </el-card>
    </div>

    <div class="auth-buttons">
      <el-button v-if="!authStore.isAuthenticated" type="primary" @click="router.push('/login')">
        登录
      </el-button>
      <el-button v-else @click="handleLogout" class="logout-btn">
        退出登录
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
import { Collection, ShoppingCart, Document, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

defineOptions({
  name: 'HomePage'
})

const authStore = useAuthStore()
const router = useRouter()

const handleLogout = () => {
  authStore.logout()
}

const handleExport = () => {
  request({
    url: '/user/export',
    method: 'GET',
    responseType: 'blob'
  }).then(response => {
    const url = window.URL.createObjectURL(response.data)
    const link = document.createElement('a')
    link.href = url
    link.download = 'orders.xlsx'
    document.body.appendChild(link)
    link.click()

    // 清理资源
    window.URL.revokeObjectURL(url)
    document.body.removeChild(link)
    ElMessage.success('导出成功')
  }).catch(error => {
    console.error('导出失败:', error)
    ElMessage.error('导出失败: ' + (error.response?.data?.message || error.message))
  })
}
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.function-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.function-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.function-card:hover {
  transform: translateY(-5px);
}

.card-content {
  padding: 20px;
  text-align: center;
}

.auth-buttons {
  margin-top: 30px;
}

.logout-btn {
  margin-top: 30px;
}
</style>
